<template>
    <footer>
         <ul>
             <li><a href="#">登陆</a></li>
             <li><a href="#">注册</a></li>
             <li><a href="#">客户服务</a></li>
             <li><a href="#">返回顶部</a></li>
         </ul>
         <div class="center">
             <a href="">
                 <img src="../../assets/d1.png" alt="">
             </a>
             <a href="">
                 <img src="../../assets/d2.png" alt="">
             </a>
             <a href="">
                 <img src="../../assets/d3.png" alt="">
             </a>
         </div>
         <p>Copyright © 2004-2020 京东JD.com 版权所有</p>
     </footer>
 </template>
 <script>
 export default {
 
 }
 </script>
 
 <style lang="scss" scoped>
 footer {
     width:100vw;
     height: 57.0667vw;
     background: #fff;
     margin-top: 1.8667vw;
     border-top: 1px solid #e5e5e5;
     box-sizing: border-box;
 }
 
 footer ul {
     height:14.6667vw;
     display: flex;
     justify-content: space-around;
     align-items: center;
     border-bottom: 1px solid #e5e5e5;
     width: 100%;
     box-sizing: border-box;
     padding: 0 8vw;
 }
 
 footer ul li a {
     color: #939494;
     font-size: 3.4667vw;
 }
 
 footer ul li {
     position: relative;
 }
 
 footer ul li::after {
     content: "";
     display: block;
     width: .1333vw;
     height:4.8vw;
     background: #a8abab;
     position: absolute;
     top: 0;
     right: -4.9333vw;
 }
 
 footer ul li:last-child:after {
     content: "";
     width: 0;
 }
 
 footer .center {
     width: 100%;
     height:18.6667vw;
     border-bottom: 1px solid #e5e5e5;
     box-sizing: border-box;
     display: flex;
     justify-content: space-around;
     align-items: center;
 }
 
 $length:16vw;
 footer .center a {
     width: $length;
     height: $length;
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 footer .center a img {
     width: $length;
     height: $length;
 }
 
 footer p {
     text-align: center;
     color: #939494;
     margin-top: 1.3333vw;
     font-size:3.2vw;
 }
 
 
 </style>